<template>
  <div>
    <div>
      <el-input
        size="medium"
        class="selectInput"
        placeholder="输入关键字查询"
        v-model="selectKey"
        suffix-icon="el-icon-circle-plus-outline">
      </el-input>
      <el-button
        size="medium" icon="el-icon-circle-plus-outline" type="success">查询
      </el-button>
    </div>
    <div>
      <el-table
        :data="highStore"
        style="width: 100%"
        :cell-style="{padding: '0'}"
        :default-sort = "{prop: 'openTime', order: 'descending'}"
      >
        <el-table-column
          prop="storeUserId"
          label="用户ID"
          sortable
          width="100">
        </el-table-column>
        <el-table-column
          prop="hostName"
          label="负责人"
          width="100">
        </el-table-column>
        <el-table-column
          prop="officePhone"
          label="办公电话"
          width="100">
        </el-table-column>
        <el-table-column
          prop="storeName"
          label="店铺名称"
          width="120">
        </el-table-column>
        <el-table-column
          property="storePic"
          label="店铺门头照"
          width="100">
          <template #default="scope">
            <el-image class="table-td-thumb" :src="scope.row.storePic" :preview-src-list="[scope.row.storePic]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="businessLicenseNo"
          label="营业执照号"
          width="120">
        </el-table-column>
        <el-table-column
          property="businessLicensePic"
          label="营业执照"
          width="100">
          <template #default="scope">
            <el-image class="table-td-thumb" :src="scope.row.businessLicensePic" :preview-src-list="[scope.row.businessLicensePic]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="idCard"
          label="身份证ID"
          width="140">
        </el-table-column>
        <el-table-column
          property="idCardFront"
          label="身份证正面照"
          width="100">
          <template #default="scope">
            <el-image class="table-td-thumb" :src="scope.row.idCardFront" :preview-src-list="[scope.row.idCardFront]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          property="idCardBack"
          label="身份证背面照"
          width="100">
          <template #default="scope">
            <el-image class="table-td-thumb" :src="scope.row.idCardBack" :preview-src-list="[scope.row.idCardBack]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="detailAddress"
          label="商铺地址"
          width="220">
        </el-table-column>
        <el-table-column
          prop="score"
          label="积分"
          sortable
          width="180">
          <template #default="scope">
            <el-rate
              v-model="scope.row.score"
              disabled
              show-score
              text-color="#ff9900">
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column
          prop="impContactName"
          label="紧急联系人姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="impContactPhone"
          label="紧急联系人电话"
          width="120">
        </el-table-column>
        <el-table-column
          prop="impContactRelative"
          label="紧急联系人关系"
          width="120">
        </el-table-column>
        <el-table-column
          prop="cashSecurity"
          label="押金"
          width="120">
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="审核时间"
          width="180">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HighStore',
    data() {
      return {
        selectKey:'',
        highStore:{
          storeHost:'',
          phone:'',
          idNumber:'',
          email:'',
          openTime:'',
          address:'',
          storeName:'',
          score:'',
          storeImg:''
        },
      }
    },
    mounted () {
      this.initTable();
    },
    methods: {
      formatter(row, column) {
        return row.address;
      },
      initTable(){
        this.getRequest('/good/data/yesStore').then(resp => {
          if (resp) {
            this.highStore = resp;
          }
        })
      }
    }
  }
</script>

<style scoped>
  .selectInput{
    width: 220px;
    margin: 10px 10px 10px 15px;
  }
  .table-td-thumb{
    width: 40px;
    margin: 4px;
  }
</style>
